<template>
	<div class="PackAndStore">
		<audio controls ref="audio" class="aud" v-show="false">
		  <source src="../../../../public/mp3/NO.mp3" />
		</audio>
		<audio controls ref="audioT" class="aud" v-show="false">
		  <source src="../../../../public/mp3/OK.mp3" />
		</audio>
		<div class="cont">
			<div class="cont-left">
				<div class="BasicInformation">
					<div class="title">
						基本信息
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="12">
								<el-form-item label="工 单 I D ：" prop="fOrgCategory">
									<el-input/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="工单编号：" prop="fOrgCategory">
									<el-input  />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="产品品号：" prop="fOrgCategory">
									<el-input  />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="预计产量：" prop="fOrgCategory">
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="产品品名：" prop="fOrgCategory">
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="产品规格：" prop="fOrgCategory">
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="20">
								<el-form-item label="规格描述：" prop="fOrgCategory">
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-checkbox  label="播放声音" size="large" />
							</el-col>
							<hr style="width: 100%;margin-bottom: 1rem;">
							<el-col :span="24">
								<el-form-item label="产品编号：" prop="fOrgCategory">
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="14">
								<el-form-item label="报工工序：">
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item>
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="14">
								<el-form-item label=" 操 作 员 ：">
									<el-input />
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item>
									<el-input />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</div>
				<div class="Scanning">
					<div class="title">
						扫描品号
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="24">
								  <el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="date" label="工单编号" />
									<el-table-column prop="name" label="产品流水号" width="120"/>
									<el-table-column prop="address" label="工单ID" />
									<el-table-column prop="address" label="产品编号" />
								  </el-table>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
			<div class="cont-rit">
				<div class="ScanningInf">
					<div class="title">
						扫描信息
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="24">
								<el-form-item>
								  <el-input class="textar"  type="textarea" disabled placeholder="*操作注意:产品编号不能为空!" />
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="扫描信息：" prop="fOrgName">
								  <el-input
									autofocus
								  />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</div>
				<div class="Progress">
					<div class="title">
						加工进度
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="24">
								<div class="table-head-botton">
									<button>明细</button>
									<button>当日包装统计</button>
								</div>
								  <el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="date" label="工单编号" />
									<el-table-column prop="name" label="产品流水号" width="120"/>
									<el-table-column prop="address" label="工单ID" />
									<el-table-column prop="address" label="产品编号" />								  </el-table>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footName">
		<el-row :gutter="10">
			<el-col :span="1.5">
				录入人：
			</el-col>
			<el-col :span="2">
				<el-form-item>
					<el-input />
				</el-form-item>
			</el-col>
			<el-col :span="2">
				<el-form-item>
					<el-input />
				</el-form-item>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import { ref,getCurrentInstance,onMounted } from "vue"
	const tableData = [
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    address: 'No. 189, Grove St, Los Angeles',
	  },
	]
	let refd=''
	onMounted(()=>{
		refd=getCurrentInstance()
	})
	function test(){
		refd.ctx.$refs.audioT.play();//play()
	}
</script>

<style lang="less" scoped>
	@import url("./PackAndStore.less");
</style>